<template>
  <!-- 主体区域 -->
  <section id="app" v-if="todoList.length > 0">
    <!-- 输入框 -->
    <header class="header">
      <h1>TodoList</h1>
      <input
        @keyup.enter="add"
        placeholder="请输入任务"
        v-model="content"
        class="new-todo"
      />
      <button class="add" @click="add">添加任务</button>
    </header>
    <!-- 列表区域 -->
    <section class="main">
      <ul class="todo-list">
        <!-- 遍历渲染的标签 -->
        <li
          class="todo"
          v-for="(item, index) in todoList"
          :key="item.id"
          :class="{ checked: item.isChecked }"
        >
          <div class="view">
            <!-- 小选框 -->
            <input type="checkbox" class="check" v-model="item.isChecked" />
            <!-- 任务序号 -->
            <span class="index">{{ index + 1 }}.</span>
            <!-- 任务名称 -->
            <label>{{ item.name }}</label>
            <!-- 删除按钮 -->
            <button class="destroy" @click="del(item.id)"></button>
          </div>
        </li>
      </ul>
    </section>
    <!-- 统计和清空 -->
    <footer class="footer" v-show="todoList.length > 0">
      <!-- 全选 -->
      <label class="check-all">
        <!-- 双向绑定.计算属性 -->
        <input type="checkbox" v-model="isAll" />
        全选
      </label>
      <!-- 统计 -->
      <span class="todo-count">
        合 计: {{ todoList.length }} / 已选: {{ totalCount }}
      </span>
      <!-- 清空 -->
      <div class="btn">
        <button class="clear-completed" @click="clear">清空任务</button>
        <button class="clear-completed" @click="clearCheck()">清除已办</button>
      </div>
    </footer>
  </section>
  <!-- 任务完成展示空 -->
  <div class="empty" v-else>恭喜你的任务完成啦~</div>
</template>

<script>
const defaultList = [
  {
    id: 1,
    isChecked: true,
    name: '吃火锅',
  },
  {
    id: 2,
    isChecked: false,
    name: '敲代码',
  },
  {
    id: 3,
    isChecked: false,
    name: '谈恋爱',
  },
]

export default {
  /*
    1. 渲染功能
      1.1 提供数据
      1.2 v-for 遍历渲染
    2. 删除功能
      2.1 拿到删除项的id -> filter
    3. 添加功能
      3.1 给添加按钮注册点击事件
      3.2 获取输入的任务 - v-model
      3.3 将获取到的任务添加到数组中 push() / unshift()
      3.4 清空任务
    4. 合计和清空
      4.1 合计: 数组的长度
      4.2 清空: todoList = []
  */

  //   这里发现当刷浏览器数据又恢复了,原因是在 date 里面初始化数据是死的,
  // 我们需要在外部声明一个默认的数据,优先从本地读取数据

  data() {
    return {
      content: '',
      // 数据优先从本地存储中读取
      // 优化:初始值设为默认数组
      todoList: JSON.parse(localStorage.getItem('list')) || defaultList,
    }
  },
  computed: {
    // 默认计算属性只能获取不能修改,需要设置完整写法
    // isAll() {
    //   // 必须所有的小选框都选中,全选按钮才选中,返回一个布尔值
    //   return this.todoList.every(item => item.isChecked === true)
    // },
    isAll: {
      // ● 小选框控制全选框:  写在 get方法中()
      // 必须要所有的小选框都选中,全选按钮才选中=>
      //  数组 every 方法返回布尔值 返回给 isAll 方法
      get() {
        return this.todoList.every(item => item.isChecked === true)
      },
      // 全选框控制小选框: set 方法中()
      set(value) {
        //传参 value 获取到全选框的状态,value 可以接收 input 的选中状态 true/false
        // 根据拿到的布尔值,让所有小选框同步状态 =>
        // 数组 forEach 方法将 value 赋值给每一项的isChecked 属性
        // console.log(value)
        this.todoList.forEach(item => (item.isChecked = value))
      },
    },
    // 统计选中个数
    totalCount() {
      return this.todoList.reduce((sum, item) => {
        // 判断是否选中
        if (item.isChecked) {
          return sum + 1
        } else {
          return sum
        }
      }, 0)
    },
  },

  methods: {
    // 删除
    del(id) {
      this.todoList = this.todoList.filter(item => item.id !== id)
    },
    // 添加
    add() {
      // 非空判断
      if (this.content.trim() === '') return alert('任务不能为空')
      this.todoList.unshift({
        id: +new Date(), // 唯一的id
        name: this.content,
      })
      // 添加后清空输入框
      this.content = ''
    },
    // 清空
    clear() {
      this.todoList = []
    },
    // 清空已选
    clearCheck() {
      this.todoList = this.todoList.filter(item => !item.isChecked)
    },
  },
  // 数据改变,监听,watch完整写法
  watch: {
    todoList: {
      deep: true,
      // 任何数据的修改,传递最新结果
      handler(newValue) {
        // console.log(newValue)
        // 将变化后的数据存到本地 转JSON
        localStorage.setItem('list', JSON.stringify(newValue))
      },
    },
  },
}
</script>

<style></style>
